import React, {Fragment, Component} from 'react';
import PropTypes from 'prop-types';
import {injectIntl, formatMessage} from '../intl';
import {Form, Table, Button, Icon, Modal} from 'antd';
import TextInput from 'Shared/components/TextInput';
import WrappedInputNumber from '../../common/WrappedInputNumber';
import WrappedPopconfirm from '../../common/WrappedPopconfirm';
import {FIXED_COLUMN_WIDTH, TABLE} from '../../constants';
import TextButton from './TextButton';
import styles from '../style.css';
import PartWarrantyCategorySelectPanel from './PartWarrantyCategorySelectPanel';
const FormItem = Form.Item;

class AddMaterial extends Component {
    state = {
        showPart: false,
    }

    handleFilterChange = (value, name) => {
        this.props.onChange(value, `${this.props.name}.${name}`);
    };

    showPart = () => {
        this.setState(state => ({
            showPart: !state.showPart
        }));
    };

    onSelectParts = records => {
        if(records.length) {
            const data = records.map(item => ({
                id: item.id,
                partWarrantyCategoryId: item.id,
                partWarrantyCategoryCode: item.code,
                partWarrantyCategoryName: item.name,
            }));
            this.props.onSelect(`${this.props.name}.materials`, data);
        }
        this.setState({
            showPart: false
        });
    }

    onDeleteAllMaterials = () => {
        this.props.onRemoveAll(`${this.props.name}.materials`);
    }
    
    onClickDeleteMaterial = index => {
        this.props.onRemove(`${this.props.name}.materials`, index);
    }

    render() {
        const materialColumns = [
            {
                title: formatMessage({
                    id: 'partWarrantyCategoryCode',
                    defaultMessage: '配件索赔分类编号'
                }),
                dataIndex: 'partWarrantyCategoryCode',
            },
            {
                title: formatMessage({
                    id: 'partWarrantyCategoryName',
                    defaultMessage: '配件索赔分类名称'
                }),
                dataIndex: 'partWarrantyCategoryName',
            },
            {
                title: <span className="ant-form-item-required">{
                    formatMessage({
                        id: 'warrantyDuration',
                        defaultMessage: '索赔时间（月）'
                    })
                }</span>,
                dataIndex: 'warrantyDuration',
                render: (text, record, index) => (
                    <FormItem required
                        validateStatus={this.props.isValidate && !text ? 'error' : null}>
                        <WrappedInputNumber
                            name={`materials[${index}].warrantyDuration`}
                            min={0}
                            value={text}
                            onBlur={this.handleFilterChange} />
                    </FormItem>
                )
            },
            {
                title: <span className="ant-form-item-required">{formatMessage({
                    id: 'warrantyMileage',
                    defaultMessage: '索赔里程'
                })}</span>,
                dataIndex: 'warrantyMileage',
                render: (text, record, index) => (
                    <FormItem required
                        validateStatus={this.props.isValidate && !text ? 'error' : null}>
                        <WrappedInputNumber
                            name={`materials[${index}].warrantyMileage`}
                            min={0}
                            value={text}
                            onBlur={this.handleFilterChange} />
                    </FormItem>
                )
            },
            {
                title: formatMessage({
                    id: 'remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
                render: (text, record, index) => (
                    <TextInput
                        name={`materials[${index}].remark`}
                        min={1}
                        value={text}
                        onBlur={this.handleFilterChange} />
                )
            },
            {
                title: this.props.data && this.props.data.length > 0 ? (
                    <WrappedPopconfirm
                        id="delete"
                        title={formatMessage({
                            id: 'addMaterial.popconfirm.message',
                            defaultMessage: '是否继续?'
                        })}
                        okText={formatMessage({
                            id: 'addMaterial.popconfirm.confirm',
                            defaultMessage: '确认'
                        })}
                        cancelText={formatMessage({
                            id: 'addMaterial.popconfirm.cancel',
                            defaultMessage: '取消'
                        })}
                        onConfirm={this.onDeleteAllMaterials}>
                        <a>
                            {formatMessage({
                                id: 'addMaterial.deleteAll',
                                defaultMessage: '清空'
                            })}
                        </a>
                    </WrappedPopconfirm>)
                    : (<a>
                        {formatMessage({
                            id: 'addMaterial.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>),
                dataIndex: 'action',
                fixed: 'right',
                width: FIXED_COLUMN_WIDTH,
                render: (text, record, index) => (
                    <TextButton name={index}
                        onClick={this.onClickDeleteMaterial}>
                        {formatMessage({
                            id: 'addMaterial.delete',
                            defaultMessage: '删除'
                        })}
                    </TextButton>
                )
            }
        ];

        return (
            <Fragment>
                <Modal
                    title={formatMessage({
                        id: 'addMaterial.parts.modal.title',
                        defaultMessage: '配件索赔分类标准'
                    })}
                    width="60%"
                    maskClosable={false}
                    footer={null}
                    wrapClassName={styles.dataSelectModal}
                    destroyOnClose={true}
                    visible={this.state.showPart}
                    onCancel={this.showPart}>
                    <PartWarrantyCategorySelectPanel onSelect={this.onSelectParts} dealerId={this.props.dealerId}
                        currentSelectRowKeys={this.props.data.map(item => item.partWarrantyCategoryId)} />
                </Modal>
                <Button className={styles.add} key="addBtn" type="dashed"
                    onClick={this.showPart}>
                    <Icon type="plus" />{formatMessage({
                        id: 'addMaterial.material.addBtn',
                        defaultMessage: '新增装车件条款清单'
                    })}
                </Button>
                <Table key="table"
                    className="white-space-nowrap"
                    rowKey="id"
                    columns={materialColumns}
                    pagination={false}
                    dataSource={this.props.data}
                    {...TABLE} />
            </Fragment>
        );
    }
}
AddMaterial.propTypes = {
    dealerId: PropTypes.string,
};

export default injectIntl(AddMaterial);
